<template>
  <div class="hello">
     <view-box>
	    	<router-view/>
			<tabbar>
		      	<tabbar-item :link="{name: 'demo'}" :selected="true">
		      		<span slot="icon" class="iconfont icon-bulb"></span>
		        	<span slot="label">Demo</span>
		      	</tabbar-item>
		      	<tabbar-item :link="{name: 'laboratory'}">
		      		<span slot="icon" class="iconfont icon-experiment"></span>
		        	<span slot="label">实验室</span>
		      	</tabbar-item>
		      	<tabbar-item :link="{name: 'about'}">
		      		<span slot="icon" class="iconfont icon-deploymentunit"></span>
		        	<span slot="label">关于</span>
		      	</tabbar-item>
	    	</tabbar>	
     </view-box>
    
  </div>
</template>

<script>
import {Tabbar,TabbarItem,ViewBox} from 'vux'
export default {
  name: 'HelloWorld',
  components:{
    Tabbar,
    TabbarItem,
    ViewBox
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '~vux/src/styles/reset.less';
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
